<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <style>
    body,
    ul,
    dl,
    dd {
      margin: 0px;
      padding: 0px;
    }

    .wrap {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url('images/bg.jpg') no-repeat;
      background-size: 100% 100%;
    }

    .play_wrap {
      width: 800px;
      height: 544px;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -400px;
      margin-top: -272px;
      /* background-color: #f9f9f9; */
    }

    .search_bar {
      height: 60px;
      background-color: #1eacda;
      overflow: hidden;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 11;
    }

    .search_bar img {
      margin-left: 23px;
    }

    .search_bar input {
      margin-right: 23px;
      width: 296px;
      height: 34px;
      border-radius: 17px;
      border: 0px;
      background: url('images/zoom.png') 265px center no-repeat rgba(255, 255, 255, 0.45);
      text-indent: 15px;
      outline: none;
    }

    .center_con {
      height: 435px;
      background-color: rgba(255, 255, 255, 0.5);
      display: flex;
    }

    .song_wrapper {
      width: 200px;
      height: 435px;
      box-sizing: border-box;
      padding: 10px;
      list-style: none;
      background: url('images/line.png') right center no-repeat;
      position: relative;
      overflow: auto;
    }

    .song_list li {
      font-size: 12px;
      color: #333;
      line-height: 36px;
      width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }

    .song_list .active {
      color: #da651e;
    }

    .player_con {
      width: 400px;
      height: 435px;
      position: relative;
    }

    .disc {
      position: absolute;
      left: 73px;
      top: 60px;
      z-index: 9;
    }

    .cover {
      position: absolute;
      left: 125px;
      top: 112px;
      width: 150px;
      height: 150px;
      border-radius: 75px;
      z-index: 8;
    }

    .comment_list {
      width: 200px;
      height: 435px;
      box-sizing: border-box;
      padding: 10px;
      list-style: none;
      background: url('images/line.png') left center no-repeat;
      overflow: auto;
      position: relative;
    }

    .comment_list dl {
      padding-left: 55px;
      position: relative;
      margin-bottom: 20px;
    }

    .comment_list dt {
      position: absolute;
      left: 4px;
      top: 0px;
    }

    .comment_list dt img {
      width: 40px;
      height: 40px;
      border-radius: 20px;
    }

    .comment_list dd {
      font-size: 12px;
    }

    .comment_list .name {
      font-weight: bold;
      color: #333;
      margin-top: 5px;
    }

    .comment_list .detail {
      color: #666;
      margin-top: 5px;
      line-height: 18px;
    }

    .audio_con {
      height: 50px;
      background-color: #f1f3f4;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    .myaudio {
      width: 800px;
      height: 40px;
      margin-top: 5px;
      outline: none;
      background-color: #f1f3f4;
    }

    /* 旋转的动画 */
    @keyframes Rotate {
      from {
        transform: rotateZ(0);
      }

      to {
        transform: rotateZ(360deg);
      }
    }

    /* 旋转的类名 */
    .autoRotate {
      animation-name: Rotate;
      animation-iteration-count: infinite;
      animation-play-state: paused;
      animation-timing-function: linear;
      animation-duration: 5s;
    }

    /* 是否正在播放 */
    .playing {
      animation-play-state: running;
    }

    .play_bar {
      position: absolute;
      left: 200px;
      top: -10px;
      z-index: 10;
      transform: rotate(-25deg);
      transform-origin: 12px 12px;
      transition: 1s;
    }

    /* 播放杆 转回去 */
    .play_bar.playing {
      transform: rotate(0);
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <img src="./images/player_title.png" alt="" />
        <input type="text" id="searchBtn"/>
      </div>
      <div class="center_con">
        <div class="song_wrapper">
          <ul class="song_list">
            <li>
              岁月神偷--周笔畅
            </li>
            <li>
              岁月神偷--金玟岐
            </li>
            <li>
              岁月神偷--汪苏泷
            </li>
            <li>
              岁月神偷--不才
            </li>
            <li>
              岁月神偷（磁性男声版）（Cover：金玟岐）--于大海（于黑蛋）
            </li>
          </ul>
        </div>
        <div class="player_con">
          <img src="./images/player_bar.png" class="play_bar" />
          <!-- 黑胶碟片 -->
          <img src="./images/disc.png" class="disc autoRotate" />
          <img src="./images/cover.png" class="cover autoRotate" />
        </div>
        <div class="comment_list">
          <div>
            <dl>
              <dt>
                <img src="https://p3.music.126.net/2cwPUmMgb6XImVwNy-FcIw==/109951163863553426.jpg" alt="" />
              </dt>
              <dd class="name">Teoeo_</dd>
              <dd class="detail">
                你没听出来汪老师一直在配合刘乐瑶唱吗，他大部分时间在给刘乐瑶和音，而且唱的是女生的key，因为是孩子们的节目，他想让孩子更多的展现自己的优点，所以汪老师尽量地配合刘乐瑶的声音唱，如果是汪苏泷一个人唱，他不会这样唱的。
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="audio_con">
        <audio controls autoplay loop class="myaudio"></audio>
      </div>
    </div>
  </div>

  
</body>

</html>
<script src="./lib/jquery-1.12.4.js"></script>
<script src="./lib/template-web.js"></script>

<!-- 歌曲列表模板结构 -->
<script type="text/html" id="tpl-songList">
  {{each result.songs}}
  <li songId = "{{$value.id}}">
    {{$value.name}}--{{$value.artists[0].name}}
  </li>
  {{/each}}
</script>

<!-- 歌曲评论列表模板结构 -->
<script type="text/html" id="tpl-commentList">
  {{each hotComments}}
  <dl>
    <dt>
      <img src="{{$value.user.avatarUrl}}" alt="" />
    </dt>
    <dd class="name">{{$value.user.nickname}}</dd>
    <dd class="detail">
      {{$value.content}}
    </dd>
  </dl>
  {{/each}}
</script>

<script>
  $(function(){
    // 1. 根据搜索关键字,获得相关歌曲列表: 苦瓜
    // 设置输入框的键盘事件
    $('#searchBtn').on('keydown', function (e) {
      if(e.keyCode == 13) {
        // 2. 获得输入的内容
        let text = $(this).val().trim();
        // 3. 非空判断
        if (text == '') {
          return;
        }
        // 4. 发起ajax请求,获得歌曲列表信息
        $.ajax(
          {
           url:'https://autumnfish.cn/search',
           data: {
            keywords: text
           },
           success: function (backData) {
             if (backData.code == 200) {
               // 5. 根据返回的歌曲列表信息,结合模板引擎生成标签结构
               let htmlStr = template('tpl-songList',backData);
               $('.song_list').html(htmlStr);
             }
           }
          }
        )
      }
    })

    // 6. 给歌曲列表li标签设置点击事件
    $('.song_list').on('click','li',function () {
      // 7. 获得当前li标签的songId值
      let songID = $(this).attr('songId');

      // 8. 发起ajax请求,获得歌曲的url播放地址
      $.ajax(
        {
          url:'https://autumnfish.cn/song/url',
          data: {
            id: songID
          },
          success: function (backData) {
            if (backData.code == 200) {
              // 9. 将返回的url设置audio标签
              $('audio').attr('src',backData.data[0].url);
            }
          }
        }
      )

      // 10. 发起ajax请求获得歌曲封面
      $.ajax(
        {
          url:'https://autumnfish.cn/song/detail',
          data: {
            ids: songID
          },
          success: function (backData) {
            if (backData.code == 200) {
              // 11. 将返回的封面设置给img标签
              $('img.cover').attr('src', backData.songs[0].al.picUrl);
            }
          }
        }
      )

      // 13. 发起ajax请求获得歌曲评论列表
      $.ajax(
        {
          url:'https://autumnfish.cn/comment/music',
          data:{
            id: songID
          },
          success: function (backData) {
            if (backData.code == 200) {
              console.log(backData);
              // 14. 根据返回的评论数据,结合模板引擎生成标签结构
              let htmlStr = template('tpl-commentList',backData);
              $('.comment_list>div').html(htmlStr);
            }
          }
        }
      )


    })

    // 9. 给audio标签设置播放与暂停事件
    $('audio').on('play', function () {
      // 当歌曲播放时,给img标签设置动画开始
      $('.player_con img').addClass('playing');
    })

    $('audio').on('pause', function () {
      // 当歌曲暂停时,给img标签移除动画类名
      $('.player_con img').removeClass('playing');
    })

  })
</script>